<template>
    <div class="registry-page flex flex-col items-center justify-center">
        <div id="login-view" v-show="!registryStatus">
            <div id="title">
                <h1>Welcome!</h1>
            </div>
            <div id="username">
                <el-input placeholder="用户名" v-model="loginInfo.username" clearable></el-input>
            </div>
            <div id="password">
                <el-input type="password" placeholder="password" v-model="loginInfo.password" show-password
                    clearable></el-input>
            </div>
            <div id="registry-btns">
                <el-button @click="login">login</el-button>
                <el-button @click="switchRegistry">registry</el-button>
                <el-link>forget-pas</el-link>
            </div>
        </div>
        <div id="registry-view" v-show="registryStatus">
            <div id="title">
                <h1>Hello!</h1>
            </div>
            <div id="username">
                <el-input placeholder="用户名" v-model="registryInfo.username" clearable></el-input>
            </div>
            <div id="password">
                <el-input type="password" placeholder="password" v-model="registryInfo.password" show-password
                    clearable></el-input>
            </div>
            <div id="registry-btns">
                <el-button @click="switchRegistry">login</el-button>
                <el-button @click="registry">registry</el-button>
            </div>
        </div>
    </div>
</template>


<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import axiosInstance from "../../utils/axiosInstance"
import { ElMessage } from 'element-plus';
import { userStore } from "../../store/userStore"
import axios from 'axios';


const registryStatus = ref<boolean>(false);

type UserInfo = {
    username: string,
    password: string
}
// 通过函数来初始化UserInfo对象
const createUserInfo = (): UserInfo => ({
    username: "",
    password: ""
})
const loginInfo: UserInfo = reactive(createUserInfo());
const registryInfo: UserInfo = reactive(createUserInfo())

const user_store = userStore();

const emits = defineEmits(['son-registry-click'])

function switchRegistry() {
    registryStatus.value = !registryStatus.value;
}


// 处理用户信息为空的情况！！！！！！！！！！！！！！
const login = async (): Promise<void> => {
    // loginInfo.avator = await randomAvator();
    if (loginInfo.username === "" || loginInfo.password === "") {
        ElMessage.warning("信息不能为空！");
        return;
    } else {
        try {
            let url = `http://localhost:8080/camelia/login`
            const response = await axiosInstance.post(url, loginInfo);
            if (response) {
                console.log(response);
                if (response.data.status === "OK") {
                    ElMessage.success(response.data.message);
                    user_store.setUserInfo(response.data.user);
                    user_store.setStatus();
                    user_store.setToken(response.data.token);
                    emits('son-registry-click');
                }
            }
        } catch (error: any) {
            if (error.code === "ERR_BAD_REQUEST") {
                ElMessage.error(error.response.data.data.message)
            }
        }
    }
}
const registry = async (): Promise<void> => {
    try {
        let url = `http://localhost:8080/camelia/registry`
        const response = await axiosInstance.post(url, registryInfo);
        if (response && response.data.status === "OK") {
            ElMessage.success(response.data.message);
            user_store.setUserInfo(response.data.user);
            user_store.setStatus();
            user_store.setToken(response.data.token)
            emits('son-registry-click');
        }
    } catch (error: any) {
        console.log(error)
    }
}


</script>


<style scoped lang="scss">
@import url("./registry.scss");
</style>